{% include "data/template-ui.html" %}
<link rel="stylesheet" type="text/css" href="/static/css/icons.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/sweetalert.css"/>
<style>
    .container-fluid {
        height: 100%;
    }
    .page-body {
        flex: 1;
        height: 0;
        overflow: auto;
        padding: 10px 15px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 13px;
    }

    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        line-height: unset;
        vertical-align: middle;
    }

    td a {
        color: #1779ba;
    }

    td a:hover. td a:focus {
        color: #1468a0;
    }
</style>

<div class="container-fluid animated fadeInUp">
    <!-- 标题 -->
    <div class="row page-titles">
        <div class="col-md-1 align-self-center">
            <h3 class="text-primary" style="font-family: 'Open Sans', sans-serif;">项目</h3>
        </div>

        <div class="col-md-11">
            <a href="javascript:void(0);" class="btn btn-primary" onclick="addMenu()">
                <i class="im-plus-circle"></i>添加项目
            </a>
        </div>
    </div>

    <div class="page-body container-fluid">
        <div class="row" style="height: 100%">
            <div class="col-md-12">
                <div class="card" id="page-content" style="height: 100%;margin: 0;">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                            <tr>
                                <th style="min-width: 100px;">项目编号</th>
                                <th style="min-width: 200px;">项目名称</th>
                                <th>仪表盘url</th>
                                <th>明细url</th>
                                <th>规则url</th>
                                <th style="min-width: 100px;">状态</th>
                                <th style="min-width: 120px;">操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script src="/static/js/sweetalert.min.js"></script>

<script>
    function changeStatus(menu) {
        menu.menu_validity = menu.menu_validity === 1 ? 0 : 1;
        $.ajax({
            type: "POST",
            async: true,
            url: "../../api/backend/menu/update",
            contentType: 'application/json',
            data: JSON.stringify(menu),
            success: function (result) {
                if (result.stat === 200) {
                    var queryString = 'id=' + menu.id
                        + '&nameEn=' + menu.menu_name_en
                        + '&name=' + menu.menu_name
                        + '&url=' + encodeURIComponent(menu.menu_url_rule)
                        + '&status=' + menu.menu_validity;
                    var status = document.getElementById('menu_' + menu.id).querySelector('a');
                    var edit = document.getElementById('edit_' + menu.id);
                    status.innerHTML = status.innerHTML === '已启用' ? '已停用' : '已启用';
                    edit.href = "../backend/menu_add?" + queryString;
                    if (status.innerHTML === '已启用') {
                        status.innerHTML === '已停用';
                        status.style.color = '#429e47';
                    } else {
                        status.innerHTML === '已启用';
                        status.style.color = '#e33734';
                    }
                } else {
                    swal({
                        title: '更新失败！',
                        text: result.msg,
                        icon: "error",
                    });
                }
            },
        });
    };

    function editMenu(url) {
        modal.dialog({
            title: "编辑",
            url: decodeURIComponent(url),
            style: 'width: 60%; height: 70vh; margin-top: 10vh'
        });
    }

    function addMenu() {
        modal.dialog({
            title: "新建",
            url: '../backend/menu_add',
            style: 'width: 60%; height: 70vh; margin-top: 10vh'
        });
    }

    function deleteMenu(id) {
        swal({
            title: "操作确认",
            text: "删除后，您将无法恢复此文件！",
            icon: "warning",
            cancelButtonText: '确定',
            buttons: {
                cancel: {
                    text: "取消",
                    visible: true,
                },
                confirm: {
                    text: "确定",
                }
            },
            dangerMode: true,
        }).then(e => {
            if (e) {
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "../../api/backend/menu/delete",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (result) {
                        if (result.stat === 200) {
                            var menu = document.getElementById('menu_' + id);
                            menu.remove();
                        } else {
                            swal({
                                title: '删除失败！',
                                text: result.msg,
                                icon: "error",
                            });
                        }
                    },
                });
            }
        });
    };

    // 弹窗中的iframe调用关闭父页面的弹窗
    function hideModal() {
        $('.modal').modal('hide');
    }

    function renderTable(obj) {
        $.ajax({
            type: "POST",
            async: true,
            url: "../../api/backend/menu/query",
            data: {},
            dataType: "json",
            success: function (result) {
                var tbody = document.getElementById("tbody");
                var html = "";
                var status = '';
                for (var i = 0; i < result.data.length; i++) {
                    if (result.data[i].menu_validity === 1) {
                        status = "<a href='javascript:void(0);'" +
                            "onclick='changeStatus(" + JSON.stringify(result.data[i]) + ")'" +
                            "style='color:#429e47;border-bottom: 1px dotted;'>已启用</a>";
                    } else {
                        status = "<a href='javascript:void(0);'" +
                            "onclick='changeStatus(" + JSON.stringify(result.data[i]) + ")'" +
                            "style='color:#e33734;border-bottom: 1px dotted;'>已停用</a>";
                    }
                    var queryString = 'id=' + result.data[i].id + '&nameEn=' + result.data[i].menu_name_en
                        + '&name=' + result.data[i].menu_name
                        + '&dashboardUrl=' + encodeURIComponent(result.data[i].menu_url_dashboard || '')
                        + '&detailUrl=' + encodeURIComponent(result.data[i].menu_url_detail || '')
                        + '&ruleUrl=' + encodeURIComponent(result.data[i].menu_url_rule || '')
                        + '&status=' + result.data[i].menu_validity;
                    var url = "../backend/menu_add?" + queryString;
                    url = encodeURIComponent(url);

                    html += "<tr id='menu_" + result.data[i].id + "'>";
                    html += '<td>' + result.data[i].menu_name_en + '</td>';
                    html += '<td>' + result.data[i].menu_name + '</td>';
                    html += "<td>" + (result.data[i].menu_url_dashboard || '')+ "</td>";
                    html += "<td>" + (result.data[i].menu_url_detail || '') + "</td>";
                    html += "<td>" + (result.data[i].menu_url_rule || '') + "</td>";
                    html += "<td>" + status + "</td>";
                    html += "<td>"
                        + `<a href="javascript:void(0);" id="edit_${result.data[i].id}" onclick="editMenu('${url}')" style="margin-right:15px;border-bottom: 1px dotted;">编辑</a>`
                        + `<a href="javascript:void(0);" onclick="deleteMenu(${result.data[i].id})" style="border-bottom: 1px dotted;">删除</a>`
                        + "<td>";
                    html += "</tr>";
                }
                if (obj && obj.refresh) {
                    tbody.innerHTML = '';
                }
                tbody.innerHTML = html;
            },
        });
    }

    $(document).ready(function () {
        renderTable({refresh: false});
    });
</script>

</body>

</html>